<!--个人账号密码登录-->
<template>
  <default-layout class="login">
    <mt-header slot="header">
      <mt-button slot="left" icon="back" @click="handleBack"></mt-button>
      <mt-button slot="right" @click="corpLogin">单位登录</mt-button>
    </mt-header>
    <div slot="main">
      <div class="logo">
        <img src="../../common/img/logo.png" alt="logo">
      </div>
      <div class="login-form">
        <yd-cell-group>
          <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-wode1"></i>
          </span>
            <xf-input
              slot="right"
              :valid="[{required: true, msg: '请输入用户名/手机号'}]"
              v-model="form.username"
              ref="username"
              :showIcon="false"
              placeholder="请输入用户名/手机号"></xf-input>
          </yd-cell-item>
          <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-suo"></i>
          </span>
            <xf-input
              slot="right"
              type="password"
              :valid="[{required: true, msg: '请输入密码'}]"
              v-model="form.password"
              ref="password"
              :showIcon="false"
              @keydown.enter.native="onSubmit"
              placeholder="请输入密码"></xf-input>
          </yd-cell-item>
        </yd-cell-group>
        <mt-button type="primary" size="large" @click="onSubmit" class="btn-login">个人登录</mt-button>
        <router-link to="/user-register" replace>
          <mt-button type="default" size="large" class="btn-login">注册</mt-button>
        </router-link>
        <div class="other-between">
          <a href="javascript:;" @click="loginCode">手机验证码登录</a>
          <router-link to="/reset">忘记密码</router-link>
        </div>
      </div>
      <!--<div class="other-login">
        <div class="middle-line">其他方式登录</div>
        <div class="weixin-between">
          <i class="xffont xf-QQ"></i>
          <i class="xffont xf-weixin1"></i>
        </div>
      </div>-->
    </div>
  </default-layout>
</template>
<script>

  import XfInput from '../../components/xf-input/xf-input.vue'
  import {validate, http, delNull} from '../../common/js/util'
  import {mapMutations} from 'vuex'
  import DefaultLayout from '../../layouts/default-layout/default-layout'

  export default {
    components: {DefaultLayout, XfInput},
    data() {
      return {
        page: 2,
        form: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      ...mapMutations({
        setUserInfo: 'SET_USER_INFO'
      }),
      handleBack() {
        let state = history.length > 2
        if (state) {
          this.$router.back()
        } else {
          this.$router.replace({name: 'home'})
        }
      },
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          this.login()
        }).catch(err => {
          console.log(err)
        })
      },
      login() {
        this.setUserInfo(null)
        http({
          method: 'post',
          url: '/sapi/perLogin',
          data: {
            username: this.form.username,
            password: this.form.password
          }
        }, loading => {
          this.$message.loading(loading)
        }).then(res => {
          if (res.result === 1) {
            this.$message.toast(res.message)
            res.data.userInfo.token = res.data.token
            res.data.userInfo.role = res.data.loginType === 1 ? 'user' : 'corp'
            delNull(res.data.userInfo)
            this.setUserInfo(res.data.userInfo)
            this.$router.replace({name: 'user'})
          }
        })
      },
      loginCode() {
        this.$router.replace({name: 'userCode', query: this.$route.query})
      },
      // 切换单位登录
      corpLogin() {
        this.$router.replace({
          name: 'corpLogin',
          query: {
            back: encodeURIComponent('/corp')
          }
        })
      },
      QQlogin() {
        // qq快捷登录
      },
      weChatLogin() {
        // 微信快捷登录
      }
    },
    created() {}
  }
</script>
<style lang="scss">
  @import "../../common/style/userLogin";
</style>
